/*
 *工作台页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import {analysisJson,endexData,projectData,adminUser,dynamic} from '@app/constants/DataSource.jsx';
import { Row, Col, Tabs, Button, Icon, Card, Avatar, Breadcrumb, Progress, List, Spin, Divider } from 'antd';
import './Workbench.css';

class Workbench extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loading:true,
			loadingMore1: false,
			loadingMore2: false,
	    showLoadingMore1: true,
	    showLoadingMore2: true,
	    data: dynamic
		};
	}

	componentDidMount(){
		setTimeout(() => {
		this.setState({loading:false});
		},300);
	}

	onLoadMore1 = () => {
    this.setState({
      loadingMore1: true,
    });
   	setTimeout(() => {
			this.setState({loadingMore1:false});
		},300);
  }

  onLoadMore2 = () => {
    this.setState({
      loadingMore2: true,
    });
   	setTimeout(() => {
			this.setState({loadingMore2:false});
		},300);
  }
   
  render() { 	
  	const gridStyle = {
			textAlign: 'center',
			height:150
		};

		
		const { loading, loadingMore1, loadingMore2, showLoadingMore1, showLoadingMore2, data } = this.state;
    const loadMore1 = showLoadingMore1 ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore1 && <Spin />}
        {!loadingMore1 && <Button type="primary" onClick={this.onLoadMore1}>更多</Button>}
      </div>
    ) : null;
    const loadMore2 = showLoadingMore2 ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore2 && <Spin />}
        {!loadingMore2 && <Button type="primary" onClick={this.onLoadMore2}>更多</Button>}
      </div>
    ) : null;
		const Card_Grid = [];
  	for(let i = 0;i<6;i++){
  		if(projectData[i]){
		    let status = 'normal';
		    if(projectData[i].state === 0){
		      status='active';
		    }else if(projectData[i].state === 1){
		      status='exception';
		    }else if(projectData[i].state ===2){
		      status = 'success';
		    }
    		Card_Grid.push(
					<Card.Grid style={gridStyle} key = {'Card.Grid'+i} style = {{paddingBottom:20}}>
						<Link to = {'/ProjectInfo?key='+i}>
							<div className = 'xiangmu'>
								<Avatar style={{ backgroundColor: projectData[i].color, verticalAlign: 'middle' }}>
				        	{projectData[i].title.substr(3,2)}
				        </Avatar>
			        	<span className = 'titleItem'>{projectData[i].title}</span>
			        	<Progress percent={projectData[i].process} status={status}/>
			        	<div style = {{marginTop:10,fontSize:10,color:'#999'}}>
			        		{projectData[i].name}
			        		<Divider type="vertical" style = {{height:10,top:0}}/>
			        		{projectData[i].endDate}
			        	</div>
			       	</div>
		       	</Link>
			    </Card.Grid>
    		)
  		}
  	}

		return (
			<div className = 'workbench'>
				<Row gutter = {16}>
					<Col span = {24}>
						<Card style = {{height:180}}>
							<Breadcrumb>
						    <Breadcrumb.Item><Link to='/Analysis'>首页</Link></Breadcrumb.Item>
						    <Breadcrumb.Item>工作台</Breadcrumb.Item>
						  </Breadcrumb>
						  <Row gutter = {16}>
						  	<Col span = {3} className = 'touxiang'>
						  		<Avatar icon="user" style = {{height:80,width:80,borderRadius: 40}}/>
						  	</Col>
						  	<Col span = {9}>
						  		<div className = 'biaoti'>
							  		<div>你好，{adminUser.name}</div>
							  		<div>系统管理员 | 浙江省－杭州市－管理部－管理员</div>
						  		</div>
						  	</Col>
						  	<Col span = {11} style = {{paddingTop:30,textAlign:'right'}}>
						  		<div className = 'statItem'>
						  			<p>项目数</p>
						  			<p>{projectData.length}</p>
						  		</div>
						  		<Divider type="vertical" />
						  		<div className = 'statItem'>
						  			<p>队伍编号</p>
						  			<p>{endexData[analysisJson.region].ranksId}</p>
						  		</div>
						  		<Divider type="vertical" />
						  		<div className = 'statItem'>
						  			<p>队伍排名</p>
						  			<p>{endexData[analysisJson.region].key}/{endexData.length}</p>
						  		</div>
						  	</Col>
						  </Row>
						</Card>
					</Col>
					<Col span = {16} style = {{paddingTop:20}}>
						<Card title="我的项目" extra={<Link to="/ProjectTeam">全部项目</Link>} loading = {this.state.loading}>
					   	{Card_Grid}
					  </Card>
					  <Card title="动态" loading = {this.state.loading} className = 'infoList' style = {{marginTop:20}}>
							<List
				        className="demo-loadmore-list"
				        loading={loading}
				        itemLayout="horizontal"
				        loadMore={loadMore1}
				        dataSource={data}
				        renderItem={item => (
				          <List.Item
										 actions={[<span>管理部</span>,<span>{item.date}</span>]}
				          >
				            <List.Item.Meta
				              avatar={<Avatar icon="user" />}
				            />
				            <div><Link to="/UserManage">{item.name}</Link>{item.action}<Link to = {'/ProjectInfo?key='+item.key}>{item.title}</Link></div>
				          </List.Item>
				        )}
				      />
						</Card>
					</Col>
					<Col span = {8} style = {{paddingTop:20}}>
						<Card title="和我有关" loading = {this.state.loading} className = 'infoList'>
							<List
				        className="demo-loadmore-list"
				        loading={loading}
				        itemLayout="horizontal"
				        loadMore={loadMore2}
				        dataSource={data}
				        renderItem={item => (
				        	item.flag ? 
				          <List.Item>
				            <List.Item.Meta
				              avatar={<Avatar icon="user" />}
				            />
				            <div>{item.action === '新建了' ? '你加入了项目' : ''}<Link to = {'/ProjectInfo?key='+item.key}>{item.title}</Link>{item.action === '拨款了' ? '项目收到拨款' : ''}</div>
				          </List.Item>
				        : <span></span>)}
				      />
						</Card>
					</Col>
				</Row>
			</div>
		);
	}
}

function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
  	
  }
)(Workbench)
